<template>
  <div>
    <el-config-provider :size="size">
      <el-dropdown trigger="contextmenu" @command="dees">
        <span class="el-dropdown-link">
          <el-icon class="el-icon--right"
            ><i class="iconfont icon-zitidaxiao"></i
          ></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              :command="{ id: 1, size: 'large' }"
              class="iconfont icon-yousanjiao"
              >超大</el-dropdown-item
            >
            <el-dropdown-item
              :command="{ id: 2, size: '' }"
              class="iconfont icon-yousanjiao"
              >默认</el-dropdown-item
            >
            <el-dropdown-item
              :command="{ id: 3, size: 'small' }"
              class="iconfont icon-yousanjiao"
              >较小</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-config-provider>
  </div>
</template>
<script>
export default {
  data() {
    return {
      size: "",
    };
  },

  methods: {
    dees(item) {
      // console.log(item)
      switch (item.id) {
        // 变大
        case 1:
          this.size = item.size;
          break;
        //默认
        case 2:
          this.size = item.size;
          break;
        //较小
        case 3:
          this.size = item.size;
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.iconfont {
  height: 30px;
  line-height: 30px;
  font-size: 22px;
  margin-top: 20px;
}
</style>
